<template>
    <div>
        <el-card class="box-card">
            <h2>定稿合同</h2>
            <el-form :model="queryForm" label-width="120px">
                <el-form-item label="合同名称：">
                    <el-input v-model="queryForm.name"></el-input>
                </el-form-item>
                <el-form-item class="centered-button">
                    <el-button type="primary" @click="queryContracts">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="contracts" style="width: 100%">
                <el-table-column prop="name" label="合同名称"></el-table-column>
                <el-table-column prop="draftTime" label="起草时间"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="mini" @click="viewOpinions(scope.row)">查看会签意见</el-button>
                        <el-button type="primary" size="mini" @click="finalizeContract(scope.row)">定稿</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryForm: {
                name: ''
            },
            contracts: []
        };
    },
    created() {
        this.fetchPendingFinalizationContracts();
    },
    methods: {
        fetchPendingFinalizationContracts() {
            this.axios.get('/api/contract/listFinalizeContract')
                .then(response => {
                    this.contracts = response.data.data;
                })
                .catch(error => {
                    console.error('Error fetching pending finalization contracts:', error);
                });
        },
        queryContracts() {
            const params = {
                name: this.queryForm.name
            };
            this.axios.get('/api/contract/listFinalizeContract/query', { params })
                .then(response => {
                    this.contracts = response.data.data;
                })
                .catch(error => {
                    console.error('Error querying contracts:', error);
                });
        },
        viewOpinions(contract) {
            this.$router.push({ path: `/view_opinions/${contract.name}` });
        },
        finalizeContract(contract) {
            this.$router.push({ path: `/finalize_contract2/${contract.name}` });
        }
    }
};
</script>

<style scoped>
.box-card {
    margin: auto;
    width: 800px;
}
.el-form-item {
    margin-bottom: 20px;
}
.centered-button {
    display: flex;
    justify-content: center;
}
</style>
